<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="4">
          <div
            style="
              width: 105px;
              height: 105px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 50%;
            "
          >
            <img
              :src="user.staffPhoto"
              style="
                width: 80px;
                height: 80px;
                border-radius: 50%;
                box-shadow: 1px 2px 4px #cccccc;
              "
              alt=""
            />
          </div>
        </el-col>
        <el-col :span="17">
          <div class="user-info">
            <h4>{{ user.username }}</h4>
            <span :class="inServiceStatus ? 'job-txt-green' : 'job-txt-red'">{{
              inServiceStatus
            }}</span>
          </div>
          <div>
            <span>最新工资基数 </span>
            <span>入职时间：{{ getTime(user.timeOfEntry) }} </span>
            <span>联系电话：{{ user.mobile }}</span>
          </div>
          <div style="margin-top: 30px">
            <span
              >本月不缴纳社保
              <el-switch
                v-model="userSocialSecurity.enterprisesPaySocialSecurityThisMonth"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </span>
            <span
              >本月不缴纳公积金
              <el-switch
                v-model="
                  userSocialSecurity.enterprisesPayTheProvidentFundThisMonth
                "
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </span>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import { getContent } from "@/api/social";
import { getTime } from "@/utils";

export default {
  data() {
    return {
      getTime,
      user: {},
      userSocialSecurity: {},
    };
  },
  computed: {
    inServiceStatus() {
      return this.user.inServiceStatus == 1 ? "在职" : "离职";
    },
  },
  created() {
    this.getContent();
  },
  methods: {
    // 点击查看详情，不同用户的id看见不同的内容
    async getContent() {
      const res = await getContent(this.$route.params.id);
      // console.log(res);
      const { user, userSocialSecurity } = res;
      this.user = user;
      this.userSocialSecurity = userSocialSecurity;
      console.log(user, userSocialSecurity);
    },
  },
};
</script>
<style scoped lang="scss">
.user-info {
  display: flex;
  h4 {
    margin-right: 10px;
  }
}
.job-txt-green,
.job-txt-red {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 3px;
  font-size: 12px;
  color: #fff;
  padding: 0 10px;
}
.job-txt-green {
  background: #67c23a;
}
.job-txt-red {
  background: #f56c6c;
}
</style>
